<template>
    <div>
        <div class="matter-tit">
            <p>行政许可</p>
            <p :title="detailInfo.matterName">{{detailInfo.matterName}}</p>
        </div>
        <div class="clearfix">
            <div class="matter-table v-fl">
                <table cellspacing="0">
                    <tbody>
                    <tr>
                        <td>基本编码</td>
                        <td :title="detailInfo.matterCode">{{detailInfo.matterCode}}</td>
                    </tr>
                    <tr>
                        <td>咨询电话</td>
                        <td :title="detailInfo.consultTel">{{detailInfo.consultTel}}</td>
                    </tr>
                    <tr>
                        <td>监督电话</td>
                        <td :title="detailInfo.superviseTel">{{detailInfo.superviseTel}}</td>
                    </tr>
                    <tr>
                        <td>行驶区域</td>
                        <td :title="detailInfo.exertionLevel">{{detailInfo.exertionLevel}}</td>
                    </tr>
                    <tr>
                        <td>办理机构</td>
                        <td :title="detailInfo.exertionDeptId">{{detailInfo.exertionDeptId}}</td>
                    </tr>
                    <tr>
                        <td>实施主体性质</td>
                        <td :title="detailInfo.exertionNature">{{detailInfo.exertionNature}}</td>
                    </tr>
                    <tr>
                        <td>适用范围</td>
                        <td :title="detailInfo.exertionDeptName">{{detailInfo.exertionDeptName}}</td>
                    </tr>
                    <tr>
                        <td>服务对象</td>
                        <td :title="detailInfo.serverObject">{{detailInfo.serverObject}}</td>
                    </tr>
                    <tr>
                        <td>办理形式</td>
                        <td :title="detailInfo.dealForm">{{detailInfo.dealForm}}</td>
                    </tr>
                    <tr>
                        <td>通办范围</td>
                        <td :title="detailInfo.dealRange">{{detailInfo.dealRange}}</td>
                    </tr>
                    <tr>
                        <td>办件类型</td>
                        <td :title="detailInfo.typeName">{{detailInfo.typeName}}</td>
                    </tr>
                    <tr>
                        <td>是否收费</td>
                        <td :title="detailInfo.isCharge">{{detailInfo.isCharge}}</td>
                    </tr>
                    <tr>
                        <td>承诺办结时限</td>
                        <td :title="detailInfo.timeLimit">{{detailInfo.timeLimit}}</td>
                    </tr>
                    <tr>
                        <td>法定办结时限</td>
                        <td :title="detailInfo.lawLimit">{{detailInfo.lawLimit}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>

        </div>

    </div>
</template>

<script>
    export default {
        name: 'wioc-matter-detail',
        components: {
        },
        props:{
           params: Object,
           url:{
        	   type: String		  
           },
           type:{
        	type:String,
        	default:'post'
           }
        },
        data () {
            return {
                indexValue:0,
                tabsList:[
                    {
                        name: '办理时间',
                    },
                    {
                        name: '受理条件',
                    },
                    {
                        name: '申请材料',
                    },
                    {
                        name: '办理流程',
                    },
                    {
                        name: '设定依据',
                    },
                    {
                        name: '收费依据及标准',
                    },
                    {
                        name: '更多',
                    },
                ],
                detailInfo: {
                    //事项ID
                    id: '',
                    //基本编码,全省（区、市）每项政务服务事项的唯一标识代码。政务服务事项的基本编码共10位，由2位事项类型代码、5位主项代码、3位子项代码三部分组成，如果没有子项，子项代码为000
                    matterCode: '010118900',
                    //实施编码,实施编码共24位，用于区分和识别该政务服务事项的实施地区、机构及办理项。包括县级及县级以上行政区划代码（6位）、乡镇街道级代码（3位）、村居社区级代码（3位）、组织机构代码或社会信用代码中组织机构信息（9位）、实施机构类别代码（1位）及办理项代码（2位），如果没有办理项，办理项代码为00
                    exertionCode: '',
                    //政务服务事项的具体名称
                    matterName: '增值税专用发票（增值税税控系统）最高开票限额审批',
                    //事项的类型审批或者服务，1.行政许可、行政征收、行政给付、行政确认、其他事项2.基本公共教育、劳动就业服务、社会保险、基本社会服务、基本医疗卫生、人口和计划生育、基本住房保障、公共文化体育、残疾人基本公共服务等
                    matterType: '',
                    //法律依据，设定依据
                    lawAccord: '',
                    //行使层级，国家级、省级、市级、县级、乡级、村级
                    exertionLevel: '',
                    //权限划分,划分同一事项在不同层级间行使的标准
                    powerDivide: '',
                    //行使内容，指法规条文对不同层级的实施机构行使同一事项有区别性规定的情况
                    exertionContent: '',
                    //实施机构单位ID
                    exertionDeptId: '',
                    //实施机构单位名称,办理具体政务服务事项的机构名称
                    exertionDeptName: '',
                    //实施主体性质，法定机关/授权组织/受委托组织
                    exertionNature: '',
                    //法律约定时限，法定办结时限,某一政务服务事项法规条款明确的具体办结时限
                    lawLimit: '',
                    //受理条件,法规和文件列明的具体条件
                    acceptCondition: '',
                    //申请材料，应包括材料名称、材料类型、材料样本、电子表单、来源渠道、纸质材料份数和规格、填报须知、受理标准、是否需电子材料
                    applyMaterial: '',
                    //联办机构，同一事项有两个以上实施机构
                    allyUnitName: '',
                    //联办机构ID
                    allyUnitId: '',
                    //中介服务，法定涉及的中介服务
                    interService: '',
                    //办理流程，绘制出所涉及的法定程序和环节以及时限要求（如申请、受理、审查、决定、制证发证等），并附以相应的文字说明，要按照简化和缩短后的时限编制。提供图片格式文件，图片清晰美观
                    dealProcess: '',
                    //数量限制，政务服务事项有数量限制的应予标注
                    countLimit: '',
                    //结果名称
                    resultName: '',
                    //结果样本，证照、批文采用安全通用的文件格式，图片清晰美观，图片中涉及企业、个人信息须隐藏
                    resultSample: '',
                    //是否收费1收0不收
                    isCharge: '',
                    //收费标准，物价部门核定的标准
                    feeLevel: '',
                    //收费依据，政府部门正式批文说明
                    feeAccord: '',
                    //服务对象，自然人/法人
                    serverObject: '',
                    //名称，承诺件/即办件
                    typeName: '',
                    //承诺事项办理时限，实际对外承诺办件办结时限
                    timeLimit: '',
                    //通办范围，全国/跨省/跨市/跨县
                    dealRange: '',
                    //办理形式，窗口/网上办理
                    dealForm: '',
                    //是否支持预约办理是/否
                    isSupportOrder: '',
                    //是否支持网上支付是/否
                    isSupportPay: '',
                    //是否支持物流快递是/否
                    isSupportExpress: '',
                    //是否为不见面事项(0:否,1:是)
                    isNotMeeting: '',
                    //职能局是否解决问题(0:否,1:是)
                    isOneWindow: '',
                    //运行系统，国家级/省级/市级
                    systemArea: '',
                    //办理地点,具体承办单位所在地点
                    dealAddress: '',
                    //办理时间
                    dealTime: '',
                    //咨询电话
                    consultTel: '',
                    //常见问题
                    faq: '',
                    //监督电话
                    superviseTel: '',
                    //内部流程描述,权力运行内部流程的说明信息
                    processDesc: '',
                    //权力更新类型,新增/变更/取消
                    powerUpdate: '',
                    //权力状态,在用/暂停/取消
                    powerStatus: '',
                    //版本生效时间
                    versionTime: '',
                    //版本号,从1开始顺序增加
                    version: '',
                    //描述
                    description: '',
                },
            }
        },
        mounted(){
            this.getDetailInfo(this.detailId);
        },
        methods: {
            checkNow: function(index) {
                this.indexValue = index;
            },
            getDetailInfo(){
				let _that = this;
				this.$axios[this.type](this.url, {params:this.params})
				  .then(function (data) {
				    // handle success
					_that.detailInfo.dealTime = data.clApplyReceive;
					_that.detailInfo.acceptCondition = data.clApprovalMater;
					_that.detailInfo.interService = data.clApprovalConds;
					_that.detailInfo.matterType = data.clDealAccording;
					_that.detailInfo.matterCode = data.clNameCode;
					_that.detailInfo.consultTel = data.clConsultWay;
					_that.detailInfo.exertionLevel = data.clRange;
					_that.detailInfo.superviseTel = data.clConsultWay;
					_that.detailInfo.exertionDeptName = data.clRange;
					_that.detailInfo.dealForm = data.clDealType;
					_that.detailInfo.exertionDeptId = data.clDealOrgan;
					
				  })
				  .catch(function (error) {
				    // handle error
				    console.log(error);
				  })
               
               
            },
        },
        watch:{
          
        }
    }

</script>
<style lang="less">
    .matter-table{
        overflow: hidden;
        width: 100%;
        border: 2px solid rgba(66,206,176,.7);
        margin: 10px 0 0 10px;
        border-radius: 5px;
        table{
            table-layout:fixed;
            width: 100%;
            background-color: rgba(97,207,202,.1);
            border-radius: 5px;
            tr{
                cursor: pointer;
            }
            th,td{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size:16px;
                border: 2px solid rgba(66,206,176,.7);
                color: #32c5af;
                line-height: 32px;
                text-align: center;
                padding: 5px 0;
            }
        }
    }

    .matter-tit{
        margin-left: 10px;
        p{
            float: left;
            font-size: 18px;
            line-height: 36px;
            &:nth-child(1){
                width: 220px;
                height: 36px;
                border-radius: 5px;
                background-color: #26646e;
                text-align: center;
				color:#fff
            }
            &:nth-child(2){
                margin-left: 15px;
                height: 36px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width:80%;
            }
        }

    }
	.matter-tab{
	    width: 100%;
	    border: 2px solid rgba(66,206,176,.7);
	    background-color: rgba(97,207,202,.1);
	    border-radius: 5px;
	    margin: 10px 0 0 10px;
	    .matter-tab-l{
	        margin: 10px 0 0 6px;
	        .matter-button{
	            width: 120px;
	            height: 32px;
				font-size:16px;
	            background: #006666;
	            text-align: center;
	            line-height: 32px;
	            color: #61cfca;
	            margin-top: 10px;
	            cursor: pointer;
	            &.active{
	                color: yellow;
	            }
	        }
	    }
	    .matter-tab-r{
	        width: 67%;
	        height: 73%;
	        margin: 15px 0 0 8px;
	    }
	}
</style>
